// useState 是 React Hook 之一，用来定义组件状态
// useEffect 是 React Hook 之一，用来执行函数副作用的，什么是副作用，就是用来发送请求、写文件、操作 DOM
import { useState, useEffect } from 'react';
import {
    Button,
    Layout,
    Card,
    Table,
    Space,
    notification,
    Pagination,
} from 'antd';
import * as userApi from '../../api/user';
import './index.css';

const { Header, Content, Footer } = Layout;

export default () => {
    // 列表数据
    const [list, setList] = useState([]);
    const [total, setTotal] = useState(0);
    const [pagination, setPagination] = useState({
        pagenum: 1,
        pagesize: 10,
    });

    /**
     * 获取用户列表
     */
    const getList = async () => {
        // 发送获取用户列表请求
        const res = await userApi.getList(pagination);
        // 接口调用失败，提示用户
        if (res.code !== 200) {
            notification.error({
                message: '接口调用失败',
                description: res.message,
            });
            return;
        }
        console.log('res.data', res.data.list);
        // 设置 list 组件状态，更新试图
        setList(res.data.list);
        setTotal(res.data.total);
    };

    /**
     * 页码改变执行的函数
     * @param {*} pagenum
     */
    const handlePagenumChange = (pagenum) => {
        setPagination({ ...pagination, pagenum });
    };

    // 发送请求
    // componentDidMount，componentDidUpdate、componentWillUnmount
    // 它会在组件渲染时，执行一次
    // 在状态更新时，也会执行一次，但是我们可以通过第二个数组参数指定，只有依赖的状态发生变化时，才执行
    useEffect(() => {
        // 它可以返回一个函数，表示组件卸载时，执行
        getList();
        return () => {
            console.log('我会在组件卸载时执行');
        };
        // 分页参数变化时，执行的回调函数
    }, [pagination]);

    // 修改表头，也就是列配置
    const columns = [
        {
            title: '用户名',
            dataIndex: 'username',
            // key: 'username',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            // key: 'email',
        },
        {
            title: '操作',
            // 自定义这一列显示的内容
            render: (text, record) => {
                return (
                    <Space>
                        <Button type="ghost">编辑</Button>
                        <Button type="ghost" danger>
                            删除
                        </Button>
                    </Space>
                );
            },
        },
    ];

    return (
        <div className="user-page">
            <Layout>
                <Header>
                    <span>Logo</span>
                </Header>
                <Content>
                    <Card>
                        {/* 表格 */}
                        <Table
                            dataSource={list}
                            columns={columns}
                            rowKey={(record) => String(record.id)}
                            pagination={false}
                        />

                        {/* 分页 */}
                        <Pagination
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(total) => `共 ${total} 条`}
                            style={{ marginTop: '20px' }}
                            onChange={handlePagenumChange}
                        />
                    </Card>
                </Content>
                <Footer>页面底部</Footer>
            </Layout>
        </div>
    );
};
